import React, { useState } from 'react';
import { message, Card, Row, Col, Tree, Menu, Dropdown } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { DownOutlined } from '@ant-design/icons';
import UserTable from '@/components/UserTable';

const Organization = () => {
  const treeData = [
    {
      title: '某某公司',
      key: '0-0',
      children: [
        {
          title: '财务部',
          key: '0-0-0',
          children: [
            {
              title: '财务一部',
              key: '0-0-0-0',
            },
            {
              title: '财务二部',
              key: '0-0-0-1',
            },
          ],
        },
        {
          title: '销售部',
          key: '0-0-1',
          children: [
            {
              title: (
                <span
                  style={{
                    color: '#1890ff',
                  }}
                >
                  销售一组
                </span>
              ),
              key: '0-0-1-0',
            },
          ],
        },
      ],
    },
  ];

  const tabListNoTitle = [
    {
      key: 'users',
      tab: '成员',
    },
    {
      key: 'roles',
      tab: '角色',
    },
  ];

  const contentListNoTitle = {
    users: <UserTable></UserTable>,
    roles: <p>roles content</p>,
  };

  const [activeTabKey, setActiveTabKey] = useState('users');

  const [roleSelected, setRoleSelected] = useState(true);

  const onTabChange = (key) => {
    setActiveTabKey(key);
  };

  const roleOptClick = (key) => {
    console.log(key);
    message.success('This is a success message');
  };

  return (
    <PageContainer>
      <Row gutter={16}>
        <Col span={6}>
          <Card
            extra={
              <Dropdown
                overlay={
                  <Menu onClick={roleOptClick}>
                    <Menu.Item key="1">添加根节点</Menu.Item>
                    <Menu.Item key="2" disabled={roleSelected}>
                      添加子节点
                    </Menu.Item>
                    <Menu.Item key="3" disabled={roleSelected}>
                      修改
                    </Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="4" disabled={roleSelected}>
                      删除
                    </Menu.Item>
                  </Menu>
                }
              >
                <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
                  操作 <DownOutlined />
                </a>
              </Dropdown>
            }
          >
            <Tree
              treeData={treeData}
              onSelect={(key, e) => {
                console.log(e.selected);
                setRoleSelected(!e.selected);
              }}
            />
          </Card>
        </Col>
        <Col span={18}>
          <Card
            tabList={tabListNoTitle}
            activeTabKey={activeTabKey}
            onTabChange={(key) => {
              onTabChange(key);
            }}
          >
            {contentListNoTitle[activeTabKey]}
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Organization;
